<template>
  <view class="container">
    <view class="hero-card">
      <view class="hero-title">快递服务</view>
      <view class="hero-desc">登记快递信息，实时掌握送达进度</view>
      <button class="register-btn" @tap="goToRegister">我要登记</button>
    </view>

    <view class="tips-card">
      <view class="tips-title">服务说明</view>
      <view class="tips-item">· 仅展示本人登记的快递</view>
      <view class="tips-item">· 工作人员送达后将更新为“已送达”</view>
    </view>

    <view class="package-list" v-if="packageList.length > 0">
      <view class="package-item" v-for="item in packageList" :key="item.id">
        <view class="item-header">
          <view class="serial">编号：{{ item.serial }}</view>
          <view class="status" :class="item.status">{{ getStatusText(item.status) }}</view>
        </view>

        <view class="info-row">
          <text class="label">快递人</text>
          <text class="value">{{ item.recipient }}</text>
        </view>

        <view class="info-row">
          <text class="label">联系方式</text>
          <text class="value">{{ item.contactPhone || '-' }}</text>
        </view>

        <view class="info-row">
          <text class="label">取件码</text>
          <text class="value code">{{ item.pickupCode }}</text>
        </view>

        <view class="info-row">
          <text class="label">村小组</text>
          <text class="value">{{ item.villageGroup || '-' }}</text>
        </view>

        <view class="info-row">
          <text class="label">登记时间</text>
          <text class="value">{{ formatTime(item.createTime) }}</text>
        </view>

        <view class="info-row" v-if="item.deliverTime">
          <text class="label">送达时间</text>
          <text class="value">{{ formatTime(item.deliverTime) }}</text>
        </view>

        <view class="remark" v-if="item.remark">
          <text class="remark-label">备注</text>
          <text class="remark-text">{{ item.remark }}</text>
        </view>
      </view>
    </view>

    <view class="empty-state" v-if="!loading && packageList.length === 0">
      <text class="empty-title">暂无快递登记</text>
      <text class="empty-desc">点击上方“我要登记”按钮即可录入快递信息</text>
    </view>
  </view>
</template>

<script>
import { expressApi } from '@/utils/api-simple.js'
import authService from '@/utils/auth.js'

export default {
  data() {
    return {
      packageList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },
  onLoad() {
    this.setupRefreshListener()
    this.checkAuthAndLoad()
  },
  onShow() {
    if (!authService.isLoggedIn()) {
      return
    }
    this.refreshData()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  onReachBottom() {
    this.loadMore()
  },
  onUnload() {
    uni.$off('refreshExpressList', this.handleRefreshEvent)
  },
  methods: {
    setupRefreshListener() {
      uni.$off('refreshExpressList', this.handleRefreshEvent)
      uni.$on('refreshExpressList', this.handleRefreshEvent)
    },
    handleRefreshEvent() {
      this.refreshData()
    },
    checkAuthAndLoad() {
      if (!authService.isLoggedIn()) {
        uni.redirectTo({
          url: '/pages/login/login?from=/pages/express-service/express-service'
        })
        return
      }
      this.loadPackageList(true)
    },
    async loadPackageList(refresh = false) {
      if (this.loading) return
      this.loading = true
      try {
        const params = {
          pageNum: refresh ? 1 : this.pageNum,
          pageSize: this.pageSize
        }
        const response = await expressApi.getMyExpressList(params)
        if (response.code === 200) {
          const list = response.rows || []
          if (refresh) {
            this.packageList = list
            this.pageNum = 1
          } else {
            this.packageList = [...this.packageList, ...list]
          }
          this.total = response.total || list.length
        }
      } catch (error) {
        console.error('加载快递登记失败', error)
        uni.showToast({ title: '加载失败，请重试', icon: 'none' })
      } finally {
        this.loading = false
        uni.stopPullDownRefresh()
      }
    },
    refreshData() {
      if (!authService.isLoggedIn()) {
        uni.redirectTo({
          url: '/pages/login/login?from=/pages/express-service/express-service'
        })
        return
      }
      this.pageNum = 1
      this.loadPackageList(true)
    },
    loadMore() {
      if (this.packageList.length >= this.total) {
        return
      }
      this.pageNum++
      this.loadPackageList()
    },
    goToRegister() {
      if (!authService.isLoggedIn()) {
        uni.redirectTo({
          url: '/pages/login/login?from=/pages/express-service/express-service'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/express-form/express-form'
      })
    },
    getStatusText(status) {
      const map = {
        pending: '待领取',
        delivered: '已送达'
      }
      return map[status] || '未知'
    },
    formatTime(time) {
      if (!time) return '-'
      return (time || '').replace('T', ' ')
    }
  }
}
</script>

<style scoped>
.container {
  padding: 24rpx;
  background-color: #f5f5f7;
  min-height: 100vh;
  box-sizing: border-box;
}

.hero-card {
  background: linear-gradient(135deg, #00acc1, #0097a7);
  color: #fff;
  border-radius: 22rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 14rpx 32rpx rgba(0, 171, 193, 0.25);
}

.hero-title {
  font-size: 40rpx;
  font-weight: bold;
}

.hero-desc {
  margin-top: 10rpx;
  font-size: 28rpx;
  opacity: 0.9;
}

.register-btn {
  margin-top: 24rpx;
  width: 100%;
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 30rpx;
  border: none;
  padding: 18rpx 0;
}

.tips-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 24rpx;
}

.tips-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.tips-item {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.package-list {
  margin-top: 24rpx;
}

.package-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.serial {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.status {
  padding: 6rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
}

.status.pending {
  background-color: #ff9800;
}

.status.delivered {
  background-color: #07c160;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.label {
  font-size: 26rpx;
  color: #666;
}

.value {
  font-size: 26rpx;
  color: #333;
}

.value.code {
  font-weight: bold;
  letter-spacing: 2rpx;
}

.remark {
  margin-top: 18rpx;
  background-color: #f7f8fa;
  border-radius: 14rpx;
  padding: 16rpx;
}

.remark-label {
  font-size: 26rpx;
  color: #999;
}

.remark-text {
  display: block;
  font-size: 26rpx;
  color: #555;
  margin-top: 6rpx;
}

.empty-state {
  margin-top: 120rpx;
  text-align: center;
  color: #999;
}

.empty-title {
  font-size: 32rpx;
  font-weight: bold;
}

.empty-desc {
  font-size: 26rpx;
  margin-top: 12rpx;
}
</style>
